<template>
  <div>
    <div>
      <div class="notice">
        <div v-if="trainInfo.entryNoticeUrl" class="attachment gl_py_10">
          <span>附件下载：</span>
          <a
            v-if="trainInfo.entryNoticeUrl"
            class="download_file gl_color_error"
            target="_blank"
            :href="getStaticFileUrl(trainInfo.entryNoticeUrl)"
          >报名须知</a>
        </div>
        <div v-if="trainInfo.entryNotice" style="height: 400px; overflow-y: auto;">
          <div v-html="trainInfo.entryNotice" />
        </div>
      </div>
      <div class="gl_py_10">
        <el-checkbox v-model="nextBtnDis">我确认已经仔细阅读报名须知</el-checkbox>
      </div>
    </div>
    <el-row>
      <el-col class="step_btn" :span="24" align="center">
        <el-button @click="goBack">返回</el-button>
        <el-button type="primary" @click="onNextStep">下一步</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    // 传入的个人信息数据
    trainInfo: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data () {
    return {
      nextBtnDis: false
    };
  },
  methods: {
    // 获取文件地址
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    onPrevStep () {
      this.$emit('onPrevStep');
    },
    goBack () {
      this.$router.go(-1);
    },
    onNextStep () {
      if (this.nextBtnDis) {
        this.$emit('onNextStep');
      } else {
        this.$message({
          message: `请仔细阅读报名须知，并确认`,
          type: 'warning',
          showClose: true
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.attachment {
  font-size: 14px;
  line-height: 16px;
}
.download_file {
  color: #dc1d1d;
  font-weight: 700;
}
.download_file:hover {
  text-decoration: underline;
}
.notice {
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar{
    width: 6px;
    height: 6px;
  }
  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    background-color: transparent;
  }
  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb{
    border-radius: 12px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
    background-color: rgba(144, 147, 153, 0.3);
  }
}
</style>
